<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="tree_files/font-awesome.min.css">
    <link rel="stylesheet" href="tree_files/ace.min.css">
</head>
<body>
<div class="row">
    <div class="col-sm-6">
        <div class="widget-box">
            <div class="widget-header header-color-blue2">
                <h4 class="lighter smaller">Choose Categories</h4>
            </div>
            <div class="widget-body">
                <div class="widget-main padding-8">
                    <div id="IFC-TREE" class="tree tree-selectable">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--[if !IE]> -->
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<!-- <![endif]-->
<script src="tree_files/bootstrap.min.js"></script>

<script src="tree_files/fuelux.tree-sampledata.js"></script>
<script src="tree_files/fuelux.tree.min.js"></script>

<script src="tree_files/ace-elements.min.js"></script>
<script src="tree_files/ace.min.js"></script>
<script>
    jQuery(function ($) {
        $('#IFC-TREE').ace_tree({
            dataSource: treeDataSource,
            multiSelect: true,
            loadingHTML: '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
            'open-icon': 'icon-minus',
            'close-icon': 'icon-plus',
            'selectable': true,
            'selected-icon': 'icon-ok',
            'unselected-icon': 'icon-remove'
        });
    });
</script>
</body>
</html>